<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/resets.css">
    <style>
        .main .center {
            width: 1080px;

        }

        .cartTitle {
            height: 77px;
            width: 100%;
            line-height: 77px;
        }

        .cartTitle a {
            color: black;
        }

        .index {
            height: 40px;
            color: #999;
            line-height: 40px;
            font-size: 14px;
            background-color: rgb(236, 231, 231);
        }

        .main input {
            width: 20px;
            height: 20px;

        }

        .index span {
            vertical-align: middle;
        }

        .index .span1 {
            width: 130px;
            display: inline-block;
        }

        .index .span2 {
            display: inline-block;
            width: 325px;
        }

        .index .span3 {
            display: inline-block;
            width: 205px;
        }

        .index .span4 {
            display: inline-block;
            width: 208px;
        }

        .index .span5 {
            display: inline-block;
            width: 128px;

        }

        .index .span6 {
            display: inline-block;
            width: 28px;
        }

        .goods1title {
            height: 18px;
            background-color: rgb(243 239 239);

            font-size: 14px;
            padding: 47px 0 17px;

        }

        .goods1title h2 {
            float: right;
            margin-right: 20px;

        }

        .goods1title span {
            float: left;
            margin-left: 20px;
        }

        .goods1title input {
            float: left;
        }

        .goods1 .goodspic {
            width: 120px;
            height: 120px;
        }

        .goods1 .goodspic img {
            width: 120px;
            height: 120px;
        }

        .goods1 {
            height: 130px;
            line-height: 142px;
            font-size: 14px;
            padding-top: 20px;
            border-top: 1px solid rgb(245 245 245);
        }

        .goods1 div,
        p {
            float: left;
        }

        .goods1 .goodspic {
            width: 120px;
            height: 120px;
            float: left;
            background-color: rgb(248, 247, 247);
        }

        .goods1 .goodsName {
            vertical-align: middle;
            width: 325px;
        }

        .goods1 .goodsPrice {
            vertical-align: middle;
            width: 170px;
            margin-right: 10px;


        }

        .goods1 .count {

            width: 150px;
            margin-top: 50px;
            margin-right: 80px;
        }

        /* del */
        .goods1 .count div {
            float: left;
            line-height: 30px;
            text-align: center;
            width: 28px;
            height: 28px;
            border: 1px solid lightgray;
            vertical-align: middle;
            cursor: pointer;
        }

        .goods1 .count input {

            float: left;
            width: 68px;
            height: 28px;
            border: 1px solid lightgray;
            vertical-align: middle;
            text-align: center;
            line-height: 28px;
        }

        .del {
            margin-left: 120px;
            font-size: 25px;
            color: lightgrey;
            cursor: pointer;
            width: 20px;
        }

        .jiesuan {
            height: 100px;
        }

        .jiesuan #total {
            float: right;
            line-height: 80px;
        }

        .jiesuan .heji {
            float: right;
            width: 187px;
            height: 80px;
            font-size: 20px;
            padding-top: 40px;

        }

        .jiesuan #totalMoney {
            text-align: center;
            line-height: 80px;
            color: red;
        }

         

        .goPay {
            width: 200px;
            height: 80px;
            float: right;
            text-align: center;
            line-height: 80px;
            color: white;
            background-color: red;
            font-size: 20px;
        }
        .jiesuan .choiceNum{
            float: left;
          
            width: 120px;
            line-height: 80px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <aside></aside>
    <header></header>
    <section class="search"></section>
    <section class="main">
        <div class="center">
            <div class="cartTitle">
                <a href="" >首页</a>><span>购物车</span>
            </div>
            <div class="index">
                <input type="checkbox" class="checkall">
                <span class="span1">全选</span>
                <span class="span2">商品信息</span>
                <span class="span3">单价</span>
                <span class="span4">数量</span>
                <span class="span5">金额</span>
                <span class="span6">操作</span>
            </div>
            <section class="goodsBigBox">
                <div class="goods1title">
                    <div><input type="checkbox" class="j-checkbox"></div>
                    <span>有品精选</span>
                    <h2>已免运费</h2>

                </div>
               
                
            </section>
            <section class="goodsBox">
               
            </section>
           
            <div class="jiesuan">
                <div class="choiceNum">
                     全选 <span class="totalNum">已选 <b class="numbers"></b> 件</span></div>
                <div class="goPay">去结算</div>
                <div class="heji">
                    <p>合计<span class="totalMoney"></span>0</p>
                </div>

            </div>


        </div>
    </section>
    <footer></footer>


</body>

</html>
<script src="js/cookieTools.js"></script>
<script src="js/jQuery.js"> </script>
<script src="js/cart.js"></script>
<script type="text/javascript">
    $("header").load("header.html"); /* 头部封装引入 */
    $(".search").load("search.html"); /* 搜索区封装引入 */
    $("footer").load("footer.html"); /* 尾部封装引入 */
    $("aside").load("aside.html"); /* 侧导航栏封装引入 */

</script>